<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--忽略页面中的邮箱格式为邮箱-->
    <meta name="format-detection" content="email=no">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no,address=no,email=no">
    <title>日签海报首页</title>
    <link rel="stylesheet" href="../res/css/base_X.css">
    <link rel="stylesheet" href="../res/css/swipercss/swiper.min.css">
    <link rel="stylesheet" href="../res/daySignPosters-v2/css/daySignPosters.css">
</head>
<body  class="iphonex">
<!--福利包-->
<div class="welfare_boxshow">
    <div class="welfare_share" style="display: none">
        <div class="welfare_box">
            <div class="welfare_content">
                <img src="../res/daySignPosters-v2/images/welfare_icon.png" alt="" class="welfare_icon">
                <div class="voucher_back">
                    <img src="../res/daySignPosters-v2/images/welfare_back.png" alt="" class="welfare_back">
                    <div class="cord_voucher clearfix">
                        <img src="../res/daySignPosters-v2/images/cord_icon.png" alt="" class="cord_icon fl">
                        <p class="voucher_p fl">
                            二维码更换卡券
                            <span>更新二维码时使用,限当日</span>
                        </p>
                    </div>
                </div>
                <p class="voucher_txt">恭喜您完成<span>连续7天</span>打卡任务，<br>
                    获得一张二维码更换卡，该福利 <br>
                    一天有效，千万别错过哦。
                </p>
                <img src="../res/daySignPosters-v2/images/welfare_btn.png" alt="" class="welfare_btn">
            </div>
        </div>
    </div>
    <a href="javascript:void (0);" class="entrance_red" style="display: none">
        <img src="../res/daySignPosters-v2/images/entrance.png" alt="">
    </a>
</div>
<div class="warp">
    <div class="daysign_page">
        <!--顶部-->
        <div class="daysign_top clearfix">
            <!--top_left  left_title  两种状态二选一-->
            <div class="top_left fl">
                <h3 class="left_tit">今日未打卡</h3>
                <p class="date_text date_num"></p>
            </div>
            <div class="left_title clearfix" style="display: none">
                <h3 class="left_title_h3 fl">累计打卡5天</h3>
                <img src="../res/daySignPosters-v2/images/blueicon.png" alt="" class="fl blueicon">
            </div>
            <div class="top_right fr">
                <img src="../res/daySignPosters-v2/images/calendar_icon.png" alt="" class="calendar_icon">
                <p class="calendar_p">打卡记录</p>
            </div>
        </div>
        <!--中间滑动图片-->
        <div class="swiper-container preview_swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide slide_s">
                    <img src="../res/images/poster/poster1.png" alt="宣品缩略图" class="scroll_img">
                </div>
                <div class="swiper-slide slide_s">
                    <img src="../res/images/poster/poster2.png" alt="宣品缩略图" class="scroll_img">
                </div>
                <div class="swiper-slide slide_s">
                    <img src="../res/images/poster/poster3.png" alt="宣品缩略图" class="scroll_img">
                </div>
            </div>
        </div>
        <!--文案显示-->
        <div class="daysign_bottom">
            <img src="../res/daySignPosters-v2/images/cowr_icon.png" alt="" class="cowr_icon">
            <p class="cowr_tit">选择下方你中意的文字放在海报上</p>
            <ul class="sele_more">
                <li class="moreli_list">
                    <p class="more_p">一个人只拥有此生此世是不够的，他还应该拥有诗意的世界。</p>
                    <p class="name_p"> —— &nbsp;&nbsp;佚名</p>
                </li>
                <li class="moreli_list">
                    <p class="more_p">童年原是一生最美妙的阶段，那时的孩子是一朵花，也是一颗果子，是一片朦朦胧胧的聪明，一种永远不息的活动，一股强烈的欲望。</p>
                    <p class="name_p"> —— &nbsp;&nbsp;佚名</p>
                </li>
                <li class="moreli_list">
                    <p class="more_p">有了苍白的童年，才能有无情的壮年。</p>
                </li>
                <li class="moreli_list">
                    <p class="more_p">一个人只拥有此生此世是不够的，他还应该拥有 诗意的世界。</p>
                </li>
                <li class="moreli_list">
                    <p class="more_p">童年原是一生最美妙的阶段，那时的孩子是一朵花，也是一颗果子，是一片朦朦胧胧的聪明，一种永远不息的活动，一股强烈的欲望。</p>
                </li>
                <li class="moreli_list">
                    <p class="more_p">有了苍白的童年，才能有无情的壮年。</p>
                </li>
                <li class="moreli_list">
                    <p class="more_p">一个人只拥有此生此世是不够的，他还应该拥有 诗意的世界。</p>
                </li>
                <li class="moreli_list">
                    <p class="more_p">童年原是一生最美妙的阶段，那时的孩子是一朵花，也是一颗果子，是一片朦朦胧胧的聪明，一种永远不息的活动，一股强烈的欲望。</p>
                </li>
                <li class="moreli_list">
                    <p class="more_p">有了苍白的童年，才能有无情的壮年。</p>
                </li>
                <li class="moreli_list">
                    <p class="more_p">一个人只拥有此生此世是不够的，他还应该拥有 诗意的世界。</p>
                </li>
            </ul>
            <p class="no_more">没有更多了</p>
            <a href="javascript:void (0)" class="posterbtn">生成海报</a>
        </div>
    </div>
</div>
</body>
<script src="../res/js/jquery-1.11.1.min.js"></script>
<script src="../res/js/resize.js"></script>
<script src="../res/js/seleMore.js"></script>
<script src="../res/js/toast-v2.js"></script>
<script src="../res/daySignPosters-v2/js/ObtainCurTime-v2.js"></script>
<script src="../res/js/swiperjs/swiper.min.js"></script>
<script>
    $(function () {
        selectOpt(".sele_more li")
    })
    $(function () {
        $(".welfare_btn").click(function () {
            $(".welfare_share").hide();
            $(".entrance_red").show();

        })
    })
    //获取最后一个元素的索引
    var lastIndex = $(".slide_s:last").index();
    var snum=-(($(".slide_s").width()*lastIndex));
    console.log(snum)
    var mySwiper = new Swiper(".swiper-container", {
        slidesPerView: "auto",
        centeredSlides: !0,
        watchSlidesProgress: !0,
        pagination: ".swiper-pagination",
        paginationClickable: !0,
        spaceBetween: 35,
        onProgress: function (a) {
            var b, c, d;
            for (b = 0; b < a.slides.length; b++) c = a.slides[b], d = c.progress, scale = 1 - Math.min(Math.abs(.2 * d), 1), es = c.style,
                // es.opacity = 1 - Math.min(Math.abs(d / 2), 1),
                es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = "translate3d(0px,0," + -Math.abs(130 * d) + "px)"
        },
        onSetTransition: function (a, b) {
            for (var c = 0; c < a.slides.length; c++) es = a.slides[c].style, es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = b + "ms"
        },
        onTouchEnd: function() {
            TR = mySwiper.translate;
            console.log(TR)
            if (snum > TR) {
                toast("啊... 今天没有太多模板啦，更多惊喜，别忘了明天继续来哦 ~");
            }
        }

    });

</script>
</html>